import React, {Component} from 'react';
import {Spin, Alert, Pagination } from 'antd';
import fetchJsonp from 'fetch-jsonp'
import MovieItem from "./MovieItem.jsx";

class MovieList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      movie: [],
      nowPage: parseInt(props.match.params.page) || 1,
      movieType: props.match.params.type,
      pageSize: 12,
      total: 0,
      isloading: true,
    }
  }
  // static async getDerivedStateFromProps(nextProps, prevState){
  //   console.log(nextProps.match.params.type, prevState.movieType)
  //   if (nextProps.match.params.type !== prevState.movieType) {
  //     let obj = {}
  //     const start = prevState.pageSize * (prevState.nowPage -1)
  //     await fetchJsonp(`http://api.douban.com/v2/movie/${nextProps.match.params.type}?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${start}&count=${prevState.pageSize}`)
  //       .then(response => response.json())
  //       .then(data => {
  //         console.log('data',{
  //           movie: 111,
  //           movieType: nextProps.match.params.type,
  //           total: data.total,
  //           isloading: false,
  //         })
  //         obj = {
  //           movie: data.subjects,
  //           movieType: nextProps.match.params.type,
  //           total: data.total,
  //           isloading: false,
  //         }
  //       })
  //       .catch(err => {
  //         console.log('err',err)
  //         return null
  //       })
  //     console.log(obj)
  //     return obj
  //   } else {
  //     console.log('null')
  //     return null
  //   }
  // }
  
  UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      nowPage: parseInt(nextProps.match.params.page) || 1,
      movieType: nextProps.match.params.type,
      isloading: true,
    }, () => {
      this.loadMovieListByTypeAndPage()
    })
  }
  
  render() {
    return <div>
      {this.renderList()}
    </div>
  }
  componentDidMount() {
    this.loadMovieListByTypeAndPage()
  }
  
  
  // 请求数据
  loadMovieListByTypeAndPage = () => {
    const start = this.state.pageSize * (this.state.nowPage -1)
    fetchJsonp(`http://api.douban.com/v2/movie/${this.state.movieType}?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${start}&count=${this.state.pageSize}`)
      .then(response => response.json())
      .then(data => {
        this.setState({
          movie: data.subjects,
          total: data.total,
          isloading: false
        })
      })
      .catch(err => {
        console.log(err)
      })
    
    // const data = require(`../../test_data/${this.state.movieType}.json`);
    // setTimeout(()=>{
    //   this.setState({
    //     isloading: false,
    //     movie: data.subjects,
    //     total: data.total
    //   })
    // }, 1000)
  }
  
  // 渲染数据
  renderList = () => {
    if(this.state.isloading){
      return <Spin tip="Loading...">
        <Alert
          message="正在加载电影"
          description="精彩内容马上呈现..."
          type="info"
        />
      </Spin>
    } else {
      return <div>
        <div style={{display:"flex", flexWrap: "wrap"}}>
          {
            this.state.movie.map(item=>{
              return<MovieItem key={item.id} {...item} history={this.props.history}></MovieItem>
            })
          }
        </div>
        <Pagination onChange={this.changeNowPage} defaultCurrent={this.state.nowPage} total={this.state.total} defaultPageSize={this.state.pageSize} showSizeChanger={false}/>
      </div>
    }
  }
  
  // 点击分页，切换分页页码
  changeNowPage = (nowPage) => {
    this.setState({
      nowPage: nowPage
    },() => {
      this.loadMovieListByTypeAndPage()
    })
  }
}

export default MovieList;
